<style>

</style>
<template>
  <el-row style="text-align: right;padding: 10px">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 50]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      background
      :total="totalCount">
    </el-pagination>
  </el-row>
</template>
<script>

export default {
  name: "vue-page",
  filters: {},
  props: ["paginator", "query"],
  components: {},
  data() {
    return {
      currentPage: 0,
      totalCount: 0
    }
  },
  computed: {},
  created() {
  },
  methods: {
    //切换每页条数
    handleSizeChange(val) {
      this.paginator.pageSize = val;
      this.query();
    },
    //切换页数
    handleCurrentChange(val) {
      this.paginator.currentPage = val;
      this.query();
    }
  },
  watch: {
    'paginator': {
      handler(newVal, oldVal) {
        if (!this.paginator) {
          this.currentPage = 0;
          this.totalCount = 0;
        }

        this.currentPage = this.paginator.currentPage;
        this.totalCount = this.paginator.totalCount;
      },
      immediate: true
    }
  }
}
</script>
